
import { useState, useEffect,useRef  } from 'react';
import { requestFn } from '@/api/api';
const Kpi = () => {
  const [kpiNum, setKpiNum] = useState({})
   const canvasRef = useRef(null);
//   /Auth/logined/UserInfo/selfInfo
const init = async () => {
    await requestFn('/Auth/logined/UserInfo/selfInfo','post',{})
    //  url: '/Auth/logined/UserInfo/selfInfo',

       await requestFn('/Auth/logined/RoleInfo/selfRoles','post',{})
   requestFn('/JtmDb/admin/ProjectYearInfo/getProjectStatInfo','post',{}).then((res) => {
      setKpiNum(res)
    })
}
 useEffect(() => {
   init()
  }, [])
  // useEffect(() => {
  //   requestFn('/Auth/logined/RoleInfo/selfRoles','post',{}).then((res) => {
  //     setKpiNum(res)
  //   })
  // }, [])

    useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    let animationFrameId;
    let startTime = null;

    const resizeCanvas = () => {
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
    };

    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();

    const drawWave = (timestamp) => {
      if (!startTime) startTime = timestamp;
      const elapsed = timestamp - startTime;
      
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 设置波浪参数
      const waveHeight = 20;
      const waveSpeed = 0.005; // 波浪速度
      const dotSpacing = 8; // 点之间的间距
      const dotRadius = 2; // 点的半径

    // 先绘制半透明蓝色填充区域
      for (let i = 0; i < 3; i++) {
        ctx.beginPath();
        ctx.moveTo(0, canvas.height); // 从底部开始

        // 绘制波浪线
        for (let x = 0; x <= canvas.width; x++) {
          const y =
            Math.sin(x * waveSpeed + elapsed * (0.002 + i * 0.001) + i * Math.PI / 3) *
            waveHeight +
            canvas.height / 2 +
            i * 30;
          ctx.lineTo(x, y);
        }

        // 连接到底部，形成封闭区域
        ctx.lineTo(canvas.width, canvas.height);
        ctx.closePath();

        // 设置半透明蓝色填充
        const opacity = 0.3 - i * 0.1;
        ctx.fillStyle = `rgba(64, 158, 255, ${opacity})`;
        ctx.fill();
      }

      // 绘制黑色虚点波浪线
      for (let i = 0; i < 3; i++) {
        // 设置黑色虚点样式
        const opacity = 0.8 - i * 0.2;
        ctx.fillStyle = `rgba(0, 0, 0, ${opacity})`;

        // 绘制虚点波浪线
        for (let x = 0; x < canvas.width; x += dotSpacing) {
          const y =
            Math.sin(x * waveSpeed + elapsed * (0.002 + i * 0.001) + i * Math.PI / 3) *
            waveHeight +
            canvas.height / 2 +
            i * 30;

          ctx.beginPath();
          ctx.arc(x, y, dotRadius, 0, Math.PI * 2);
          ctx.fill();
        }
      }
// 请求浏览器在下次重绘之前执行drawWave函数
// 该函数返回一个唯一的标识符，可用于取消动画帧请求
// drawWave函数将在每次浏览器准备重绘时被调用，实现平滑的动画效果
      animationFrameId = requestAnimationFrame(drawWave);
    };

    animationFrameId = requestAnimationFrame(drawWave);

    return () => {
      window.removeEventListener('resize', resizeCanvas);
      cancelAnimationFrame(animationFrameId);
    };
  }, []);
  return (
    <div className="kpi-container relative">
      
      
      <div>绩效考核</div>
      {/* {kpiNum.map(item=>(
        <div key={item.id}>{item.real_name}</div>
      ))} */}
     
      <div className="w-full flex gap-[6px] h-[394px] ">
        <div className="kpi-statistics  ">
          <div className="kpi-nums">
            <h2 className="text-5xl font-bold text-blue-500 ">  {kpiNum.cnt_total}</h2>
            <p className="text-gray-800 text-xl">项目总数</p>
          </div>

          <div className="kpi-nums">
            <h2 className="text-5xl font-bold text-green-500 "> {kpiNum.cnt_finish}</h2>
            <p className="text-gray-800 text-xl">完成项目</p>
          </div>

          <div className="kpi-nums">
            <h2 className="text-5xl font-bold text-orange-500 ">{kpiNum.cnt_in_progress}</h2>
            <p className="text-gray-800 text-xl">推进项目</p>
          </div>

          <div className="kpi-nums">
            <h2 className="text-5xl font-bold text-red-500 ">{kpiNum.cnt_overdue}</h2>
            <p className="text-gray-800 text-xl">逾期项目</p>
          </div>
        </div>
        <div className="kpi-statistics bg-white rounded-[2px] p-3 flex-col relative ">
          <div className="block-title">
            <div className="title-line"></div>
            <div className="title-text">进程</div>

          </div>
            <canvas
        ref={canvasRef}
        className="absolute top-0 left-0 w-full h-full"
        style={{ zIndex: 99 }}
      />
        </div>
        <div className="kpi-statistics bg-white rounded-[2px] p-3 flex-col">
          <div className="block-title">
            <div className="title-line"></div>
            <div className="title-text">绩效考核排名</div>
          </div>
        </div>
      </div>
    </div>
  )
}
export default Kpi
